<template>
  <el-card
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.1)"
    class="board-hover"
  >
    <div slot="header">
      <span>内存</span>
      <el-button
        style="float: right; padding: 3px 0"
        type="text"
        icon="el-icon-refresh-right"
        @click="getlist()"
      >
      </el-button>
      <span class="tip">每小时自动刷新:{{ loadTime }}</span>
    </div>
    <div class="el-table el-table--enable-row-hover el-table--medium">
      <table cellspacing="0" style="width: 100%">
        <thead>
          <tr>
            <th class="is-leaf">
              <div class="cell">属性</div>
            </th>
            <th class="is-leaf">
              <div class="cell">内存</div>
            </th>
            <th class="is-leaf">
              <div class="cell">JVM</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="board-row">
            <td>
              <div class="cell">总内存</div>
            </td>
            <td>
              <div class="cell" v-if="server.mem">{{ server.mem.total }}G</div>
            </td>
            <td>
              <div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div>
            </td>
          </tr>
          <tr class="">
            <td>
              <div class="cell">已用内存</div>
            </td>
            <td>
              <div class="cell" v-if="server.mem">{{ server.mem.used }}G</div>
            </td>
            <td>
              <div class="cell" v-if="server.jvm">{{ server.jvm.used }}M</div>
            </td>
          </tr>
          <tr class="board-row">
            <td>
              <div class="cell">剩余内存</div>
            </td>
            <td>
              <div class="cell" v-if="server.mem">{{ server.mem.free }}G</div>
            </td>
            <td>
              <div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div>
            </td>
          </tr>
          <tr class="">
            <td>
              <div class="cell">使用率</div>
            </td>
            <td>
              <div
                class="cell"
                v-if="server.mem"
                :class="{ 'text-danger': server.mem.usage > 80 }"
              >
                {{ server.mem.usage }}%
              </div>
            </td>
            <td>
              <div
                class="cell"
                v-if="server.jvm"
                :class="{ 'text-danger': server.jvm.usage > 80 }"
              >
                {{ server.jvm.usage }}%
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </el-card>
</template>
<script>
import { getServer } from "@/api/monitor/server";

export default {
  name: "memo",
  data() {
    return {
      // 服务器信息
      server: [],
      loading: false,
      loadTime: "",
      // 定时刷新(秒)
      timeSec: 60 * 60,
      timeChecked: true,
      timer: {},
    };
  },
  created() {
    this.getlist();

    // 设置定时刷新
    if (this.timeChecked) {
      this.timer = window.setInterval(this.getlist, this.timeSec * 1000);
    } else {
      window.clearInterval(this.timer);
    }
  },
  methods: {
    /** 查询服务器信息 */
    getlist() {
      this.loading = true;
      getServer()
        .then((response) => {
          this.loadTime = this.parseTime(new Date());
          this.server = response.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.board-hover {
  &:hover {
    box-shadow: 0 2px 12px 0 brown;
  }
}

.tip {
  float: right;
  color: gray;
  font-size: 10px;
  margin-right: 10px;
}

.board-row {
  background-color: #e8f4ff;
}
</style>
